<template>
	<div class="bind-phone-wrap login-page-wrap">
		<div class="xieyi-outer-wrap" style="display: none;" ref="xieyi">
			<xieyi ref="xieyicomp"></xieyi>
		</div>
		<div class="xieyi-outer-wrap" style="display: none;" ref="policy">
			<privacy-policy></privacy-policy>
		</div>
		<div class="login-page-header-wrap">
			<div class="login-page-header"><slot name="tips">绑定手机</slot></div>
			<template v-if="!createAccont">
				<a href="javascript:;" class="login-jump" @click="jump" v-if="steps">跳过</a>
				<i class="close-icon" @click="closeDialog" v-else></i>
			</template>
			<template v-else>
				<a href="javascript:;" class="login-jump" style="font-size: 0.87rem;" @click="createNewAccount">创建新账号</a>
			</template>
		</div>
		<div class="login-body-wrap">
			<div class="login-page-item-wrap">
				<div class="login-page-item border-1px fix">
					<i class="login-icon icon-phone"></i>
					<input type="tel" novalidate="novalidate" pattern="[0-9]*" placeholder="手机号" class="login-input" v-model="bind.phone">
				</div>
				<div class="login-page-item border-1px fix" style="position: relative;">
					<i class="login-icon icon-code"></i>
					<input type="tel" novalidate="novalidate" pattern="[0-9]*" placeholder="验证码" class="login-input" v-model="bind.code" style="width:10rem;">
					<span class="get-code-span" v-if="!hasSend" @click="sendMessage">获取验证码</span>
					<span class="get-code-disabled" v-else>{{sendTipsMessage}}</span>
				</div>
				<div class="login-page-item fix" style="border: 0 none;" v-show="!is_official">
					<div class="checkbox-wrap fl">
						<span class="radio-label" @click="toggleAgree" :class="{'checked':agreechecked}"></span>
					</div>
					<div class="fl" style="font-size: 0.87rem;color: #666;">同意<a href="javascript:;" class="login-a-wrap" @click="showXieyi">《1234tv服务条款》</a><a href="javascript:;" class="login-a-wrap" @click="showPrivacyPolicy">《隐私政策》</a></div>
				</div>
				<div class="bind-phone-captcha"></div>
				<div class="login-btn-wrap">
					<div class="login-btn" @click="bindPhone">确定</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import xieyi from '@/views/reg/components/xieyi2'
	import PrivacyPolicy from '@/views/reg/components/PrivacyPolicy'
	import {getPath} from '@/utils/auth'
	import {sendMsg,bindPhone,createNewAccount,bindAccount} from '@/api/login'
	import { getToken, setToken, removeToken} from '@/utils/auth'
	export default{
		name:'bindPhone',
		data(){
			return{
				bind:{
					phone:'',
					code:'',
					NECaptchaValidate:''
				},
				errorMsg:'',
				sendTipsMessage:'60S',
				sendSecond:0,
				agreechecked:false,
				hasSend:false,
				is_official: typeof(window.is_official) !== 'undefined' ? window.is_official : false
			}
		},
		props:{
			steps:{
				type:Boolean,
				default:true
			},
			createAccont:{
				type:Boolean,
				default:false
			},
			loginType:{
				type:Number
			},
			returnUrl:{
				type:String,
				default:'/'
			},
			uuid: {
				type: Number,
				default: +((Math.random().toString()).substr(-6))
			},
		},
		components:{xieyi,PrivacyPolicy},
		creatd(){
			this.captchaIns = null
		},
		methods:{
			toggleAgree(){
				this.agreechecked = !this.agreechecked
			},
			showXieyi(){
				this.$layer.open({
					 type: 1
					,content: this.$refs.xieyi.innerHTML
					,className:'custom-layer'
				});
			},
			showPrivacyPolicy(){
				this.$layer.open({
					 type: 1
					,content: this.$refs.policy.innerHTML
					,className:'custom-layer'
				});
			},
			sendMessage(){
				if(this.bind.phone){
					if(!/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/.test(this.bind.phone)){
						this.errorMsg = '请填写正确的手机号'
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = '请输入手机号!'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					})
					return false
				}
				if(this.sendSecond === 0){
					if(this.captchaIns){
						this.captchaIns.verify()
					}
				}else{
					return false
				}
			},
			bindPhone(){
				if(this.bind.phone){
					if(!/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8,9]))\d{8}$/.test(this.bind.phone)){
						this.errorMsg = '请填写正确的手机号'
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}else{
					this.errorMsg = '请输入手机号!'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					})
					return false
				}
				if(!this.bind.code){
					this.errorMsg = '请输入短信验证码!'
					this.$layer.open({
						content: this.errorMsg
						,skin: 'msg'
						,time: 2 //2秒后自动关闭
					})
					return false
				}
				if(!this.is_official){
					if(!this.agreechecked){
						this.errorMsg = '请同意1234tv服务条款!'
						this.$layer.open({
							content: this.errorMsg
							,skin: 'msg'
							,time: 2 //2秒后自动关闭
						});
						return false
					}
				}
				let loadingIndex = this.$layer.open({type: 2});
				if(!this.createAccont){
					bindPhone(this.bind).then(res=>{
						this.$layer.close(loadingIndex)
						if(res.code === 0){
							let index = this.$layer.msg(res.message)
							this.$store.dispatch('GetUserInfo')
							setTimeout(()=>{
								if(this.steps){
									this.$layer.close(index)
									this.jump()
								}else{
									this.$emit("close-bind")
								}
							},1000)
						}
					}).catch(err=>{
						this.$layer.close(loadingIndex)
						console.log(err)
					})
				}else{
					let obj = {login_type:this.loginType,...this.bind}
					bindAccount(obj).then(res=>{
						this.$layer.open({
							content: res.message
							,skin: 'msg'
							,time: 0.5
							,end:()=>{
								this.setLoginToken(res.data.token)
								this.$router.replace(this.returnUrl)
							}
						})
					}).catch(err=>{
						console.log(err)
					}).finally(()=>{
						this.$layer.close(loadingIndex)
					})
				}
			},
			jump(){
				let fromPath = getPath()
				this.$router.push(fromPath)
			},
			closeDialog(){
				this.$emit('close-bind')
			},
			createNewAccount(){
				createNewAccount({login_type:this.loginType}).then(res=>{
					this.$layer.open({
						content: res.message
						,skin: 'msg'
						,time: 0.5
						,end:()=>{
							this.setLoginToken(res.data.token)
							this.$router.replace(this.returnUrl)
						}
					})
				}).catch(err=>{
					console.log(err)
				})
			},
			setLoginToken(token){
				this.$store.commit('SET_USER','')
				this.$store.commit('SET_TOKEN',token)
				removeToken()
				setToken(token)
			}
		},
		mounted(){
			let that = this;
			initNECaptcha({
					element: '.bind-phone-captcha',
					captchaId: 'b280b14b93ba4e2c9cf3d25a922cd0ab',
					mode: 'bind',
					onVerify: (err,res)=>{
						if(!err){
							this.bind.NECaptchaValidate = res.validate
							let loadingIndex = this.$layer.open({type: 2});
							sendMsg({phone:this.bind.phone,NECaptchaValidate:this.bind.NECaptchaValidate,phone_exist:0}).then(res=>{
								this.$layer.close(loadingIndex)
								if(res.code === 0){
									this.hasSend = true
									this.$layer.msg(res.message)
									this.sendTipsMessage = '60S'
									let timer = setInterval(()=>{
										this.sendSecond++
										this.sendTipsMessage = (60-this.sendSecond)+'S'
										if(this.sendSecond === 60){
											this.hasSend = false
											this.captchaIns.refresh()
											clearInterval(timer)
											this.sendSecond = 0
											timer = null
										}
									},1000)
								}
							}).catch(err=>{
								this.$layer.close(loadingIndex)
								console.log(err)
								this.captchaIns.refresh()
							})
						}
					}
			}, function (instance) {
					// 初始化成功后得到验证实例instance，可以调用实例的方法
					that.captchaIns = instance
			}, function (err) {
					// 初始化失败后触发该函数，err对象描述当前错误信息
			})
		}
	}
</script>

<style scoped>
	.close-icon{
		position: absolute;
		width: 1.12rem;
		height: 1.12rem;
		top:0;
		bottom: 0;
		right: 20px;
		margin: auto;
		background: url(../../../assets/images/private-chat-close-icon.png) no-repeat;
		background-size: 100% 100%;
	}
</style>
